<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	ul{
		width: 800px;
		border: 10px solid;
		display: flex;
	}
	li{
		width: 200px;
		height: 100px;
		background-color: #bfc;
		font-size: 50px;
		text-align: center;
		line-height: 100px;
		/* flex-grow: 1; */
		/* 弹性元素在主轴上的基础长度 默认值auto参考元素自身高度或宽度*/
		flex-basis: 100px;
		/* 缩写 flex 增长 缩减 基础长度 */
		
	}
	li:nth-child(1){
		order: 3;
	}
	li:nth-child(2){
		/* 指定元素排列顺序 */
		order: 2;
		background-color: #0000FF;
	}
	li:nth-child(3){
		order: 1;
		background-color: orange;
	}
	
</style>